// 审核列表页面
import { message, Table,Tag } from 'antd'
import axios from 'axios'
import {Button} from 'antd'
import React,{useEffect,useState} from 'react'

export default function AuditList(props) {
    // 审核列表数据
    const [dataSource, setDataSource] = useState([])
    // 当前用户身份信息
    const {username}=JSON.parse(localStorage.getItem("token"))
    // 获得审核列表的数据
    useEffect(() => {
        axios.get(`/news?author=${username}&auditState_ne=0&publishState_lte=1&_expand=category`).then(res=>{
            // console.log(res.data);
            setDataSource(res.data)
        })
    }, [username])

    // 撤销新闻功能
    const handleRervert=(item)=>{
        // 在页面数据中撤销
        setDataSource(dataSource.filter(data=>data.id!==item.id))
        // 在后台数据中撤销
        axios.patch(`/news/${item.id}`,{
            auditState:0
        }).then(res=>{
            message.info('已撤销，您可以在草稿箱中查看您的新闻')
        })
    }

    // 修改新闻功能
    const handleUpdate=(item)=>{
        props.history.push(`/news-manage/update/${item.id}`)
    }

    // 发布功能
    const handelPublish=(item)=>{
        axios.patch(`/news/${item.id}`, {
            "publishState": 2,
            "publishTime":Date.now()
        }).then(res=>{
            // 跳转页面
            message.success('您可以在发布管理/已发布中查看您的新闻')
            props.history.push('/publish-manage/published')
        })
    }
    // 表格数据列
    const columns = [
        {
            // 列表标题
          title: '新闻标题',
        //   列表内容名称
          dataIndex: 'title',
          render:(title,item)=>{
              return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
          }
        },
        {
          title: '作者',
          dataIndex: 'author',
        },
        {
            title: '新闻分类',
            dataIndex: 'category',
            render:(category)=>{
                return <div>{category.title}</div>
            }
        },
        {
            title: '审核状态',
            dataIndex: 'auditState',
            render:(auditState)=>{
                const colorList=["",'orange','green','red']
                const auditList=["草稿箱","审核中","已通过","未通过"]
                return <Tag color={colorList[auditState]}>{auditList[auditState]}</Tag>
            }
        },
        {
            title:'操作',
            render:(item)=>{
                return (
                    <div>
                        {/* 撤销新闻按钮 */}
                        {
                            item.auditState===1 && <Button onClick={()=>{
                                return handleRervert(item)
                            }}>撤销</Button>
                        }
                        {/* 发布新闻按钮 */}
                        {
                            item.auditState===2 && <Button danger onClick={
                                ()=>handelPublish(item)
                            }>发布</Button>
                        }
                        {/* 修改新闻按钮 */}
                        {
                            item.auditState===3 &&<Button type="primary" onClick={
                                ()=>handleUpdate(item)
                            }>更新</Button>
                        }
                    </div>
                )
            }
        }
      ];
    
    return (
        <div>
            <Table dataSource={dataSource} columns={columns}
            pagination={{
                pageSize:5
            }}
            rowKey={item=>item.id}/>
        </div>
    )
}
